import { useContext, useEffect, useRef, useState } from "react";
import GlobalContext from './GlobalContext'
import Line from './Line'
import '../assets/mem.css'
import * as echarts from 'echarts'

const { setMemHt, getOption } = window.api.mem

function Mem(props) {
  const { t } = useContext(GlobalContext)
  const memChartRef = useRef()

  useEffect(() => {
    setMemHt(props.memInf.contentHt)
  }, [props.memInf.contentHt])

  useEffect(() => {
    let memChart = echarts.getInstanceByDom(memChartRef.current)
    if (!memChart) {
      memChart = echarts.init(memChartRef.current)
    }
    memChart.setOption(getOption(t, props.memInf, props.memOther))
  }, [props.memOther, t])

  return (
    <GlobalContext.Consumer>
      {ctx => {
        return (
          <div className="mem-container">
            <div style={{ height: '150px' }}>
              <div>
                <span className="square"></span>
                {t('memUsage')}
              </div>
              <div
                id="mem-chart"
                ref={memChartRef}
                style={{
                  width: '100%',
                  height: '125px'
                }}
              ></div>
            </div>
            <Line />
            {/* 内存信息 */}
            <div className="mem-info">
              <div className="mem-item-info">
                <span>{ctx.t('total-size')}</span>
                <span>{props.memInf.total} GB</span>
              </div>
              <div className="mem-item-info">
                <span>{ctx.t('cached')}</span>
                <span>{props.memInf.buffcache} GB</span>
              </div>
            </div>
            {/* 内存插槽信息 */}
            {props.memInf && props.memInf.detail && props.memInf.detail.length > 1 && (
              <>
                <Line />
                <div className="bank-container">
                  {props.memInf.detail.map((item, index) => {
                    return (
                      <div key={index} className="bank-item">
                        <div className="bank-item-title">
                          <span className="square"></span>
                          {ctx.t('bank')} {index}
                        </div>
                        <div className="bank-item-info">
                          <span className="bank-item-style">
                            <span>{ctx.t('size')}</span>
                            <span>{item.size} GB</span>
                          </span>
                          <span className="bank-item-style">
                            <span>{ctx.t('sped')}</span>
                            <span>{item.clockSpeed} MHz</span>
                          </span>
                          <span className="bank-item-style">
                            <span>{ctx.t('manu')}</span>
                            <span>{item.manufacturer}</span>
                          </span>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </>
            )}
            <Line />
          </div>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default Mem
